<template>
  <view class="container">
    <!-- 搜索栏 -->
    <uni-search-bar
      class="search-bar"
      placeholder="输入活动名称搜索"
      v-model="searchKeyword"
      @confirm="handleSearch"
      @clear="handleClear"
    />

    <!-- 活动列表 -->
    <uni-section title="促销活动列表" type="line">
      <scroll-view scroll-y class="scroll-View">
        <!-- 活动卡片 -->
        <uni-card
          v-for="activity in filteredActivities"
          :key="activity.id"
          :title="activity.name"
          :extra="formatTime(activity.createTime)"
          margin="10rpx"
        >
          <view class="card-content">
            <!-- 状态标签 -->
            <uni-tag 
              :text="activity.status | statusText"
              :type="activity.status | statusType"
              size="small"
            />
            
            <view class="time-info">
              <text>活动时间：{{ activity.startTime }} 至 {{ activity.endTime }}</text>
            </view>

            <!-- 操作按钮 -->
            <view class="action-buttons">
              <uni-icons 
                type="compose" 
                size="24" 
                color="#007AFF" 
                @click="handleEdit(activity.id)"
              />
              <uni-icons 
                type="trash" 
                size="24" 
                color="#dd524d" 
                class="delete-btn" 
                @click="handleDelete(activity.id)"
              />
            </view>
          </view>
        </uni-card>
      </scroll-view>
    </uni-section>

    <!-- 添加按钮 -->
    <view class="add-button">
      <uni-icons 
        type="plus-filled" 
        size="30" 
        color="#fff" 
        @click="handleAdd"
      />
    </view>
  </view>
</template>

<script>
    import {
        isLogin
    } from '../tools/tools'
    export default {
        data() {
            return {

            }
        },
        methods: {

        },
        onShow: async () => {
            isLogin()
        }
    }
</script>
export default {
  data() {
    return {
      searchKeyword: '',
      activities: [
        {
          id: 1,
          name: '双十一大促',
          startTime: '2024-11-01',
          endTime: '2024-11-11',
          createTime: '2024-10-25',
          status: 'ongoing'
        },
        {
          id: 2,
          name: '618年中促销',
          startTime: '2024-06-01',
          endTime: '2024-06-18',
          createTime: '2024-05-20',
          status: 'ended'
        }
      ]
    }
  },
  computed: {
    filteredActivities() {
      return this.activities.filter(activity => {
        return activity.name.toLowerCase().includes(this.searchKeyword.toLowerCase()) ||
               activity.id.toString().includes(this.searchKeyword)
      })
    }
  },
  filters: {
    statusText(status) {
      const statusMap = {
        'not_start': '未开始',
        'ongoing': '进行中',
        'ended': '已结束'
      }
      return statusMap[status] || '未知状态'
    },
    statusType(status) {
      const typeMap = {
        'not_start': 'default',
        'ongoing': 'success',
        'ended': 'error'
      }
      return typeMap[status] || 'default'
    }
  },
  methods: {
    formatTime(time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm')
    },
    handleSearch() {
      // 执行搜索逻辑
    },
    handleClear() {
      this.searchKeyword = ''
    },
    handleAdd() {
      uni.navigateTo({
        url: '/pages/activity/edit'
      })
    },
    handleEdit(id) {
      uni.navigateTo({
        url: `/pages/activity/edit?id=${id}`
      })
    },
    handleDelete(id) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除该活动吗？',
        success: (res) => {
          if (res.confirm) {
            this.activities = this.activities.filter(activity => activity.id !== id)
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  height: 100vh;
  box-sizing: border-box;
}

.scroll-View {
  height: calc(100vh - 200rpx);
}

.card-content {
  padding: 10rpx 0;
}

.time-info {
  margin: 15rpx 0;
  font-size: 26rpx;
  color: #666;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #eee;
}

.delete-btn {
  margin-left: 20rpx;
}

</style>
.add-button {
  position: fixed;
  right: 40rpx;
  bottom: 100rpx;
  width: 80rpx;
  height: 80rpx;
  background-color: #007AFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.4);
}
</style>
